<template>
  <section>
    <van-tabs v-model="active" line-width="60px">
      <van-tab title="我的提案">
        <ul class="case">
          <li>
            <p>2020年竭诚服务教工 汇聚奋进力量——学 校第十次党代会以来校工会工作成就巡礼</p>
            <span>2020-12-01</span>
            <div>
              <p>流程动态：步骤2 待受理的建议提案</p>
            </div>
          </li>
          <li>
            <p>2020年竭诚服务教工 汇聚奋进力量——学 校第十次党代会以来校工会工作成就巡礼</p>
            <span>2020-12-01</span>
            <div>
              <p>流程动态：已结束</p>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="我附议的">
        <ul class="motion">
          <li>
            <p>2020年竭诚服务教工 汇聚奋进力量——学校第十次党代会以来校工会工作成就巡礼</p>
            <span>2020-12-01</span>
            <i>已附议</i>
          </li>
          <li>
            <p>2020年竭诚服务教工 汇聚奋进力量——学校第十次党代会以来校工会工作成就巡礼</p>
            <span>2020-12-01</span>
            <i>已附议</i>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
    <tabbar :index="index" />
  </section>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import tabbar from "../../components/tabbar.vue";

Vue.use(Tab);
Vue.use(Tabs);

export default {
  components: { tabbar },
  data() {
    return {
      active: 0,
      index: 3,
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
section {
  padding: 0 15px;
  .case{
    margin: 20px 0;
    li{
      position: relative;
      margin-bottom: 20px;
      padding: 10px 10px 50px;
      border-radius: 5px;
      box-shadow: 2px 2px 4px #F3F3F3, -2px -2px 4px #F3F3F3;
      >p{
        margin-bottom: 8px;
        line-height: 1.5em;
        font-size: 16px;
      }
      span{
        color: #666;
        font-size: 13px;
      }
      div{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0 10px;
        height: 42px;
        line-height: 42px;
        background: #FFEEE5;
        p{
          position: relative;
          padding-left: 15px;
          color: #fd784e;
          font-size: 15px;
          &::before{
            content: '';
            position: absolute;
            top: 18px;
            left: 0;
            width: 7px;
            height: 7px;
            background: #FD784E;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .motion{
    margin: 20px 0;
    li{
      position: relative;
      margin-bottom: 20px;
      padding: 10px 10px 15px;
      border-radius: 5px;
      box-shadow: 2px 2px 4px #F3F3F3, -2px -2px 4px #F3F3F3;
      >p{
        margin-bottom: 8px;
        line-height: 1.5em;
        font-size: 16px;
      }
      span{
        color: #666;
        font-size: 13px;
      }
      i{
        float: right;
        color: #9e0f16;
        font-size: 16px;
        font-style: normal;
      }
    }
  }
}
.van-tab--active {
  font-size: 16px !important;
}
</style>